<template>
  <div class="bulk-pricing">
    <div class="bulk-pricing-header">
      <div class="bulk-pricing-header-btn">
        <!-- <el-button type="primary" size="small">选择已有模板</el-button>
        <el-button type="primary" size="small">新建定价模板</el-button> -->
        <el-tabs v-model="activeName">
          <el-tab-pane label="选择已有模板" name="selectTemp">
            <div class="bulk-pricing-header-input">
              <span>选择定价模板</span>
              <el-select
                v-model="pricingValue"
                clearable
                placeholder="请选择定价模板"
              >
                <el-option
                  v-for="item in pricingData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-tab-pane>
          <el-tab-pane label="新建定价模板" name="addTemp">
            <div class="bulk-pricing-header-input">
              <span>选择定价模板</span>
              <el-radio-group v-model="radio">
                <el-radio :label="1">备选项</el-radio>
                <el-radio :label="2">备选项</el-radio>
                <el-radio :label="3">备选项</el-radio>
              </el-radio-group>
            </div>
            <!-- 直接定价 显示内容 -->
            <div class="direct-pricing" v-if="pricingValue == 1">
              <div class="direct-pricing-item">
                <div class="direct-pricing-item-input">
                  <el-input
                    v-model="pricingValue"
                    placeholder="请输入价格"
                  ></el-input>
                  <span>美元</span>
                </div>
                <div class="direct-pricing-item-btn">
                  <el-button type="primary" size="small">应用模板</el-button>
                </div>
              </div>
            </div>
            <!-- 按利润率定价 -->
            <div class="profit-pricing" v-else-if="pricingValue == 2">
              <div class="profit-pricing-item">
                <div class="profit-pricing-item-input">
                  <el-input
                    v-model="pricingValue"
                    placeholder="请输入百分比"
                  ></el-input>
                  <span>%</span>
                </div>
                <div class="profit-pricing-item-input">
                  <el-input
                    v-model="pricingValue"
                    placeholder="保底收益(选填)"
                  ></el-input>
                  <span>美元</span>
                </div>
              </div>
              <div class="profit-pricing-list">
                <div class="profit-pricing-input">
                  <div class="profit-pricing-input-item">
                    <div class="profit-pricing-input-check">
                      <el-checkbox v-model="checked"
                        >价格在xx.01至xx.50的产品格式化为xx.49</el-checkbox
                      >
                    </div>
                    <div class="profit-pricing-input-btn">
                      <el-button plain size="small">自定义尾数</el-button>
                    </div>
                  </div>
                  <div class="profit-pricing-input-item"></div>
                </div>
                <div class="profit-pricing-input">
                  <div class="profit-pricing-input-item">
                    <div class="profit-pricing-input-check">
                      <el-checkbox v-model="checked"
                        >价格在xx.51至xx.00的产品格式化为xx.99</el-checkbox
                      >
                    </div>
                    <div class="profit-pricing-input-btn">
                      <el-button plain size="small">自定义尾数</el-button>
                    </div>
                  </div>
                  <div class="profit-pricing-input-item">
                    <el-button type="primary" size="small">应用模板</el-button>
                  </div>
                </div>
              </div>
            </div>
            <!-- 按公式定价 -->
            <div
              class="profit-pricing formula-pricing"
              v-else-if="pricingValue == 3"
            >
              <div class="profit-pricing-item">
                <div class="profit-pricing-item-input">
                  <div class="pricing-item-input-name">成本价</div>
                  <span>x</span>
                  <el-input
                    v-model="pricingValue"
                    placeholder="请输入百分比"
                  ></el-input>
                  <span>+</span>
                  <el-input
                    v-model="pricingValue"
                    placeholder="保底收益(选填)"
                  ></el-input>
                  <!-- <span>%</span> -->
                </div>
              </div>
              <div class="profit-pricing-list">
                <div class="profit-pricing-input">
                  <div class="profit-pricing-input-item">
                    <div class="profit-pricing-input-check">
                      <el-checkbox v-model="checked"
                        >价格在xx.01至xx.50的产品格式化为xx.49</el-checkbox
                      >
                    </div>
                    <div class="profit-pricing-input-btn">
                      <el-button plain size="small">自定义尾数</el-button>
                    </div>
                  </div>
                  <div class="profit-pricing-input-item"></div>
                </div>
                <div class="profit-pricing-input">
                  <div class="profit-pricing-input-item">
                    <div class="profit-pricing-input-check">
                      <el-checkbox v-model="checked"
                        >价格在xx.51至xx.00的产品格式化为xx.99</el-checkbox
                      >
                    </div>
                    <div class="profit-pricing-input-btn">
                      <el-button plain size="small">自定义尾数</el-button>
                    </div>
                  </div>
                  <div class="profit-pricing-input-item">
                    <el-button type="primary" size="small">应用模板</el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 数据列表 -->
    <div class="bulk-pricing-table">
      <div
        class="bulk-pricing-table-list"
        v-for="(child, idx) in [1, 1]"
        :key="idx"
      >
        <!-- 数据头部 -->
        <div class="bulk-pricing-table-list-header">
          <div class="header-product">产品信息</div>
          <div class="header-color">颜色/尺寸</div>
          <div class="header-cost">产品成本</div>
          <div class="header-flatcar">
            <span>平台费率</span>
            <span @click="onSetFlatcar">设置</span>
          </div>
          <div class="header-logistics">
            <span>物流费</span>
            <span>(暂无) <i @click="onSetLogistics">设置</i></span>
          </div>
          <div class="header-retail-price">零售价</div>
          <div class="header-profit">利润率</div>
        </div>
        <!-- 显示内容 -->
        <div class="bulk-pricing-table-list-content">
          <div class="content-product">
            <div class="content-product-img">
              <img
                class="image-100"
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F210924215JTF0-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655608858&t=52920e5b1b1fb9b08b7087ee094feeef"
                alt=""
              />
            </div>
            <div class="multi-line">
              产品名称产品名称产品名称产品名称产品名称产品名称品名称产品名称
            </div>
            <div class="content-product-name"><span>类目:</span><i>45</i></div>
            <div class="content-product-name"><span>编号:</span><i>45</i></div>
            <div class="content-product-name"><span>材质:</span><i>45</i></div>
          </div>
          <div class="content-box">
            <div
              class="content-box-list"
              v-for="(item, index) in [1, 1, 1]"
              :key="index"
            >
              <div class="content-color">
                <div class="content-color-name">M</div>
                <div class="content-color-list">
                  <div
                    class="content-color-color"
                    v-for="(color, index) in [
                      '#fff',
                      '#ebebeb',
                      'pink',
                      '#f00000',
                      '#f00000',
                      '#f00000',
                    ]"
                    :key="index"
                    :style="{ 'background-color': color }"
                  ></div>
                </div>
              </div>
              <div class="content-cost">11.09</div>
              <div class="content-flatcar">15%</div>
              <div class="content-logistics">00.00</div>
              <div class="content-retail-price">
                <el-input-number
                  v-model="num"
                  :controls="false"
                  :precision="2"
                  :min="0.01"
                  :step="1"
                ></el-input-number>
              </div>
              <div class="content-profit">设置物流及售价后自动计算</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { MessageBox } from 'element-ui';
import { mapMutations } from 'vuex';

export default {
  name: 'bulkPricing',
  components: {},
  props: {},
  data() {
    return {
      // 定价模板
      pricingData: [
        {
          value: 1,
          label: '直接定价',
        },
        {
          value: 2,
          label: '按利润率定价',
        },
        {
          value: 3,
          label: '按公式定价',
        },
      ],
      pricingValue: '', // 选择定价模板
      addTempRadio: 1, // 新建定价模板
      activeName: 'selectTemp', // 模板
      num: 0,
      checked: false,
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    ...mapMutations(['setLogisticsFees']),
    // 设置平台费
    onSetFlatcar() {
      MessageBox.prompt('您可以根据实际品类进行设置', '修改平台率(%)', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: '',
        inputErrorMessage: '邮箱格式不正确',
      })
        .then(({ value }) => {
          console.log(value);
        })
        .catch(() => {});
    },
    // 物流费设置
    onSetLogistics() {
      this.setLogisticsFees(true);
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.bulk-pricing {
  .bulk-pricing-header {
    padding: 24px;
    background-color: #ebebeb;

    .bulk-pricing-header-input {
      display: flex;
      align-items: center;
      padding-top: 12px;

      span {
        padding-right: 12px;
      }
    }

    // 直接定价 显示内容
    .direct-pricing {
      .direct-pricing-item {
        display: flex;
        justify-content: space-between;
        margin-top: 12px;

        .direct-pricing-item-input {
          display: flex;
          align-items: center;

          span {
            width: 60px;
            text-align: center;
          }
        }
      }
    }
    // 按利润率定价
    .profit-pricing {
      margin-top: 12px;

      .profit-pricing-item {
        display: flex;

        .profit-pricing-item-input {
          display: flex;
          align-items: center;
          margin-right: 24px;

          span {
            width: 40px;
            text-align: center;
          }
        }
      }

      .profit-pricing-list {
        display: flex;
        flex-direction: column;

        .profit-pricing-input {
          display: flex;
          justify-content: space-between;
          padding: 6px 0;

          .profit-pricing-input-item {
            display: flex;
            flex: 1;
            .profit-pricing-input-check {
              display: flex;
              align-items: center;
            }
            .profit-pricing-input-btn {
              margin-left: 12px;
            }
          }

          .profit-pricing-input-item {
            flex: 1;
            display: flex;

            &:nth-child(2) {
              justify-content: right;
            }
          }
        }
      }
    }
    // 按公式定价
    .formula-pricing {
      .pricing-item-input-name {
        width: 50px;
      }
      .el-input {
        width: 120px;
      }
    }
  }
  // 数据列表
  .bulk-pricing-table {
    margin-top: 24px;
    height: 500px;
    overflow-y: auto;

    .bulk-pricing-table-list {
      margin-bottom: 12px;

      // 数据头部
      .bulk-pricing-table-list-header {
        display: flex;
        height: 50px;
        background-color: #ebebeb;
        width: 895px;
        overflow: hidden;

        & > div {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .header-product {
          width: 184px;
        }

        .header-color {
          width: 180px;
        }
        .header-cost {
          width: 100px;
        }
        .header-flatcar {
          display: flex;
          flex-direction: column;
          width: 100px;

          span {
            &:nth-child(2) {
              cursor: pointer;
              color: #4181ff;
            }
          }
        }
        .header-logistics {
          display: flex;
          flex-direction: column;
          width: 100px;

          span {
            display: flex;
            i {
              cursor: pointer;
              color: #4181ff;
              font-style: normal;
            }
          }
        }
        .header-retail-price {
          width: 120px;
        }
        .header-profit {
          width: 110px;
        }
      }
      // 显示内容
      .bulk-pricing-table-list-content {
        display: flex;

        .content-product {
          width: 184px;
          padding: 12px 12px 0;
          display: flex;
          flex-direction: column;
          color: #00091a;
          border-right: 1px solid #ebebeb;

          .content-product-img {
            margin: 0 auto 12px;
            width: 100px;
            height: 100px;
          }

          .multi-line {
            width: 160px;
            font-weight: 600;
          }

          .content-product-name {
            font-weight: 600;
            width: 100%;
            padding: 5px 0;
            text-align: left;

            i {
              font-style: normal;
            }
          }
        }
        .content-box {
          flex: 1;

          .content-box-list {
            display: flex;
            border-bottom: 1px solid #ebebeb;
            border-right: 1px solid #ebebeb;

            & > div {
              display: flex;
              align-items: center;
              justify-content: center;
              height: 80px;
            }

            .content-color {
              display: flex;
              flex-direction: column;
              width: 180px;

              .content-color-name {
                padding-bottom: 6px;
                text-align: center;
                font-weight: 700;
              }

              .content-color-list {
                display: flex;
                flex-wrap: wrap;
                padding: 0 12px;

                .content-color-color {
                  width: 35px;
                  height: 15px;
                  border-radius: 4px;
                  margin-right: 4px;
                  margin-bottom: 4px;
                  border: 1px solid #ebebeb;

                  &:nth-child(4n) {
                    margin-right: unset;
                  }
                }
              }
            }

            .content-cost {
              width: 100px;
            }

            .content-flatcar {
              width: 100px;
            }
            .content-logistics {
              width: 100px;
            }

            .content-retail-price {
              width: 120px;
              padding: 0 15px;

              /deep/ .el-input-number {
                width: unset;
              }
            }

            .content-profit {
              width: 110px;
            }
          }
        }
      }
    }
  }
}
</style>
